<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">分销中心</block>
		</cu-custom>
		<view class="padding bg-white">
			<view class="qui-cell bg-main radius10">
				<view class="cell-hd"><image :src="UserInfo.HeadIMg" mode="" class="cu-avatar round lg"></image></view>
				<view class="cell-bd text-white ml5">
					<view class="fs34 fw600" v-html="UserInfo.NickName"></view>
					<view class="fs24 mt5">推荐上级:{{ Recommender }}</view>
				</view>
				<view class="cell-ft">
					<view class="lever-box"  v-if="role!=''">
						<image :src="imgurl + 'fx_img1.png'" mode="" class="img30"></image>
						<text class="text-white fs22 ml5" v-text="role"></text>
					</view>
				</view>
			</view>
			<view class="qui-cells">
				<view class="qui-cells-title" style="padding: 25rpx 0;"><text class="fs32 fw600 text-default">我的佣金</text></view>
				<view class="qui-cells-tips">
					<view class="flex">
						<navigator url="/pages/my/lingqianDetail?tip=分销">
							<view class="qui-cell shadow-1 no-after-none">
								<view class="cell-hd"><image :src="imgurl + 'fx_img5.png'" mode="" class="img40"></image></view>
								<view class="cell-bd"><text class="fs28 fw600">佣金账单</text></view>
							</view>
						</navigator>
						<navigator url="/pages/my/lingqian">
							<view class="qui-cell shadow-1 flex-sub ml10">
								<view class="cell-hd"><image :src="imgurl + 'fx_img6.png'" mode="" class="img40"></image></view>
								<view class="cell-bd">
									<view class="fs28 fw600">个人钱包</view>
									<view class="fs24 text-muted">已发放分销奖励将自动转入</view>
								</view>
							</view>
						</navigator>
					</view>
					<view>
						<view class="qui-cell">
							<view class="cell-hd"><image :src="imgurl + 'fx_img8.png'" mode="" class="img40" style="vertical-align: bottom;"></image></view>
							<view class="cell-bd">
								<view class="fs28 fw600">累计佣金</view>
								<!-- 	<view class="fs24 text-muted">累计佣金:￥98569.00</view> -->
							</view>
							<view class="cell-ft">
								<view class="ff text-default">
									<text class="fs24 fw600">￥</text>
									<text class="fs30" v-text="CommissionMoney"></text>
								</view>
							</view>
						</view>
						<view class="qui-cell">
							<view class="cell-hd"><image :src="imgurl + 'fx_img9.png'" mode="" class="img40" style="vertical-align: bottom;"></image></view>
							<view class="cell-bd">
								<view class="fs28 fw600">累计积分</view>
								<!-- 	<view class="fs24 text-muted">累计积分:5412</view> -->
							</view>
							<view class="cell-ft">
								<view class="ff text-default"><text class="fs30" v-text="CommissionPoints"></text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="qui-cells mt20" v-if="role!=''">
			<view class="qui-cells-title"><text class="fs30 fw600 text-default ml10">分销应用</text></view>
			<view class="qui-cells-tips bor-1px-t ptb20">
				<view class="qui-grids">
					<navigator :url="item.url" class="qui-grid" v-for="item in toolbarList" >
						<image :src="imgurl + item.imgurl" class="img60"></image>
						<view>{{ item.name }}</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import base from 'utils/base.js';
import tools from 'utils/tools.js';

export default {
	data() {
		return {
			role: '',
			CommissionMoney: 0,
			CommissionPoints: 0,
			Recommender: '平台',
			UserInfo: {},
			imgurl: this.$imgurl,
			toolbarList: [
				{
					name: '推广名片',
					imgurl: 'fx_img10.png',
					url: '/pages/daogou/mycard'
				}
				// ,
				// {
				// 	name: '团队管理',
				// 	imgurl: 'fx_img11.png',
				// 	url: '/pages/daogou/award'
				// }
			]
		};
	},
	onLoad() {},
	mounted() {
		let currentPage = this;
		currentPage.GetUserData();
		currentPage.GetParentUserInfo();
		currentPage.GetRoleCommissionByUserID();
		currentPage.Statistics();
	},
	methods: {
		GetUserData: function() {
			let currentPage = this;

			let globalData = getApp().globalData;

			let params = {
				type: 'GET',
				url: '/api/UserInfo/GetUserInfo',
				data: {},
				sCallback: function(response) {
					if (response.IsSuccess) {
						let userInfo = response.Data;
						currentPage.UserInfo = userInfo;
					}
				}
			};
			base.request(params);
		},
		GetParentUserInfo: function() {
			let currentPage = this;

			let globalData = getApp().globalData;

			let params = {
				type: 'GET',
				url: '/api/UserInfo/GetParentUserInfo',
				data: {},
				sCallback: function(response) {
					if (response.IsSuccess) {
						let puserInfo = response.Data;
						if (puserInfo != null) currentPage.Recommender = puserInfo.NickName;
					}
				}
			};
			base.request(params);
		},
		GetRoleCommissionByUserID: function() {
			let currentPage = this;

			let globalData = getApp().globalData;

			let params = {
				type: 'GET',
				url: '/api/UserInfo/GetRoleCommissionByUserID',
				data: {},
				sCallback: function(response) {
					if (response.IsSuccess) {
						let role = response.Data;
						currentPage.role = role;
					}
				}
			};
			base.request(params);
		},
		Statistics: function() {
			let currentPage = this;
			let globalData = getApp().globalData;

			let params = {
				hideLoading: true,
				type: 'POST',
				url: '/api/UserInfo/SumCommissionLog',
				data: {
					kind: 6,
					Month: '',
					Tip: '分销'
				},
				sCallback: function(response) {
					if (response.IsSuccess) {
						currentPage.CommissionMoney = response.Data.income;
					} else {
						uni.showToast({
							title: response.Msg
						});
					}
				}
			};
			base.request(params);

			let params1 = {
				hideLoading: true,
				type: 'POST',
				url: '/api/UserInfo/SumCommissionLog',
				data: {
					kind: 2,
					Month: '',
					Tip: '分销'
				},
				sCallback: function(response) {
					if (response.IsSuccess) {
						currentPage.CommissionPoints = response.Data.income;
					} else {
						uni.showToast({
							title: response.Msg
						});
					}
				}
			};
			base.request(params1);
		}
	}
};
</script>

<style lang="scss" scoped>
.qui-grids {
	padding: 0rpx 20rpx;
}
.qui-grid {
	width: 25%;
	justify-content: center;
	align-items: center;
}
.lever-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 148rpx;
	height: 45rpx;
	background: rgba(0, 0, 0, 1);
	border-radius: 23rpx 0px 0px 23rpx;
	position: absolute;
	right: 0;
	top: 38rpx;
}
.img40 {
	width: 40rpx;
	height: 40rpx;
}
.shadow-1 {
	box-shadow: 0px 4rpx 36rpx 2rpx rgba(88, 88, 88, 0.06);
}
</style>
